<template>
	<view class="order_view">
		<u-sticky bgColor="#fff">
			<u-tabs :list="list2"></u-tabs>
		</u-sticky>
		<u-popup :show="showDetail" @close="showDetail=false" mode="bottom" :round="10" closeable>
			<view>
				<text>订单筛选</text>
			</view>
			<text>订单状态</text>
			<view class="flex">
				<view class="flex2" v-for="item in list2" :key="item.name">
					{{item.name}}
				</view>
			</view>
			<text>订单标签</text>
			<view class="flex">
				<view class="flex2" v-for="item in list2" :key="item.name">
					{{item.name}}
				</view>
			</view>
			<text>订单类型</text>
			<view class="flex">
				<view class="flex2" v-for="item in list2" :key="item.name">
					{{item.name}}
				</view>
			</view>
			<text>订单日期</text>
			<view class="flex">
				<view class="flex2" v-for="item in list2" :key="item.name">
					{{item.name}}
				</view>
			</view>
		</u-popup>
		<view class="" @click="toOrder">
			<card></card>
		</view>
	</view>
</template>

<script>
	import card from '@/components/card.vue';
	export default {
		name: "orderview",
		data() {
			return {
				list2: [{
					name: '全部',
				}, {
					name: '待付款',
				}, {
					name: '待报价'
				}, {
					name: '待接单'
				}, {
					name: '待预约'
				}, {
					name: '施工中'
				}, {
					name: '待验收'
				}, {
					name: '待评价'
				}, {
					name: '已评价'
				}, {
					name: '已完结'
				}],
				showDetail: false
			};
		},
		components:{
			card
		},
		methods: {
			toOrder() {
				this.showDetail = true
				// uni.switchTab({
				// 	url: '/pages/tabbar/order/order'
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order_view {
		.flex {
			flex-wrap: wrap;
			justify-content: flex-start;

			.flex1 {
				margin: 20rpx;
				width: 200rpx;
				height: 200rpx;
				background-color: #7a7a7a;
			}

			.flex2 {
				margin: 20rpx;
				width: 144rpx;
				height: 60rpx;
				text-align: center;
				color: #818181;
				line-height: 60rpx;
				background-color: #F8F8F8;
				border-radius: 8rpx;
			}
		}

		
	}
</style>